<template>
  <view class="container">
    <view class="header">
      <view class="back-arrow" @click="onBack" />
      <text class="title">
        赊欠录入
      </text>
      <view class="collection-text" @click="handleSubmit">
        <text>提交</text>
      </view>
    </view>
    <view class="form-container">
      <view class="form-item">
        <text class="label">
          买家名称
        </text>
        <view class="input-group">
          <input v-model="buyerName" class="input" placeholder="请导入买家">
          <button class="import-btn" @click="toggleImportPopup">
            导入
          </button>
        </view>
      </view>

      <view class="form-item">
        <text class="label">
          赊欠时间
        </text>
        <picker mode="date" :value="outOfStockDate" @change="onDateChange">
          <view class="input-group">
            <input v-model="outOfStockDate" class="input" readonly placeholder="请选择赊欠时间">
            <button class="calendar-btn">
              <image src="@/static/images/common/canlendar.png" mode="aspectFit" class="calendar-icon" />
            </button>
          </view>
        </picker>
      </view>

      <view class="form-item">
        <text class="label">
          赊欠金额
        </text>
        <view class="input-group">
          <input v-model="outOfStockAmount" class="input" placeholder="请输入赊欠金额">
          <div class="import-btn">
            元
          </div>
        </view>
      </view>

      <view class="form-item">
        <text class="label">
          备注
        </text>
        <view class="input-group">
          <input v-model="remarks" class="input" placeholder="请输入备注">
          <button class="import-btn" @click="importBuyerName">
            导入
          </button>
        </view>
      </view>
    </view>

    <view class="upload-section">
      <text class="upload-label">
        上传赊欠凭证 ({{ uploadedFiles.length }}/6)
      </text>
      <view class="upload-list">
        <view v-for="(item, index) in uploadedFiles" :key="index" class="upload-item">
          <image class="preview-image" :src="item" mode="aspectFill" />
          <view class="delete-icon" @click="uploadedFiles.splice(index, 1)">
            ×
          </view>
        </view>
        <view v-if="uploadedFiles.length < 6" class="upload-btn" @click="handleUpload">
          <text class="plus-icon">
            +
          </text>
          <text>拍照上传</text>
        </view>
      </view>
    </view>

    <SearchFilterPopup
      :show="showImportPopup"
      :title="'收入项搜索及创建'"
      :inputPlaceholder="'搜索买家名称或手机号'"
      :buttonText="'搜索'"
      :list="buyers"
      @update:show="showImportPopup = $event"
    />
  </view>
</template>

<script>
import SearchFilterPopup from '@/components/SearchFilterPopup.vue'

export default {
  components: {
    SearchFilterPopup
  },
  data() {
    return {
      buyerName: '',
      outOfStockDate: new Date().toISOString().split('T')[0],
      outOfStockAmount: '',
      remarks: '',
      uploadedFiles: [],
      showImportPopup: false,
      buyers: [
        { name: '张三', phone: '17720498851' },
        { name: '李四', phone: '17720498852' },
        { name: '王五', phone: '17720498853' },
      ],
    };
  },
  methods: {
    onBack() {
      uni.navigateBack();
    },
    handleSubmit() {
      if (!this.buyerName) return uni.showToast({ title: '请填写买家名称', icon: 'none' });
      if (!this.outOfStockAmount) return uni.showToast({ title: '请填写赊欠金额', icon: 'none' });
      const formData = {
        buyerName: this.buyerName,
        outOfStockDate: this.outOfStockDate,
        outOfStockAmount: Number.parseFloat(this.outOfStockAmount),
        remarks: this.remarks,
        uploadedFiles: this.uploadedFiles,
      };
      uni.request({ url: '/api/submit', method: 'POST', data: formData, success: () => uni.showToast({ title: '提交成功' }) });
    },
    toggleImportPopup() {
      this.showImportPopup = !this.showImportPopup;
    },
    importBuyerName() {
      uni.navigateTo({ url: '/pages/contacts/select' });
    },
    onDateChange(e) {
      this.outOfStockDate = e.detail.value;
    },
    handleUpload() {
      uni.chooseImage({
        count: 6 - this.uploadedFiles.length,
        success: (res) => {
          this.uploadedFiles = [...this.uploadedFiles, ...res.tempFilePaths];
        },
      });
    },
  },
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  background-color: #fff;
}

.header {
  position: relative;
  display: flex;
  align-items: center;
  height: 88rpx;
  padding: 0 20rpx;
  border-bottom: 1rpx solid #f5f5f5;
  background-color: #fff;
}

.back-arrow {
  position: absolute;
  left: 20rpx;
  width: 30rpx;
  height: 30rpx;
  background: url("@/static/images/order/back.png") no-repeat center;
  background-size: contain;
}

.title {
  font-size: 36rpx;
  color: #000;
  font-weight: bold;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.collection-text {
  position: absolute;
  right: 20rpx;
  font-size: 36rpx;
  color: rgba(255, 87, 51, 1);
  display: flex;
  font-weight: bold;
  align-items: center;
}

.form-container {
  background-color: rgba(242, 247, 255, 1);
}

.form-item {
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  border-bottom: 1rpx solid #eee;
  padding: 20rpx;
  background-color: #fff;
}

.label {
  font-size: 28rpx;
  color: #000;
  font-size: 17px;
  font-weight: bold;
  display: block;
  margin-bottom: 20rpx;
}

.input-group {
  display: flex;
  align-items: center;
  background-color: rgba(242, 247, 255, 1);
  border-radius: 5px;
  height: 80rpx;
}

.input {
  flex: 1;
  font-size: 32rpx;
  height: 80rpx;
  padding-left: 24rpx;
}

.import-btn {
  border-radius: 0px 7.43px 7.43px 0px;
  background: rgba(67, 207, 124, 1);
  color: white;
  font-size: 32rpx;
  width: 120rpx;
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  font-weight: bold;
  flex-shrink: 0;
}

.calendar-btn {
  border-radius: 0px 7.43px 7.43px 0px;
  background: rgba(67, 207, 124, 1);
  width: 120rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.calendar-icon {
  width: 32rpx;
  height: 32rpx;
}

.date-picker {
  font-size: 32rpx;
  color: #333;
}

.unit {
  font-size: 32rpx;
  color: #333;
  margin-left: 20rpx;
}

.textarea {
  width: 100%;
  height: 200rpx;
  font-size: 32rpx;
  padding: 10rpx;
  border: 1rpx solid #eee;
  border-radius: 8rpx;
}

.upload-section {
  margin-top: 40rpx;
  padding: 20rpx;
}

.upload-label {
  font-size: 28rpx;
  color: #666;
  display: block;
  margin-bottom: 20rpx;
}

.upload-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.upload-item {
  width: 200rpx;
  height: 200rpx;
  position: relative;
  border: 1rpx dashed #ddd;
  border-radius: 8rpx;
}

.preview-image {
  width: 100%;
  height: 100%;
  border-radius: 8rpx;
}

.delete-icon {
  position: absolute;
  right: -10rpx;
  top: -10rpx;
  width: 40rpx;
  height: 40rpx;
  background: red;
  border-radius: 50%;
  color: white;
  text-align: center;
  line-height: 40rpx;
}

.upload-btn {
  width: 200rpx;
  height: 200rpx;
  border: 1rpx dashed #007aff;
  border-radius: 8rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #007aff;
}

.plus-icon {
  font-size: 48rpx;
  margin-bottom: 10rpx;
}

.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.popup {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  padding: 20rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.15);
  z-index: 1001;
  border-radius: 20rpx 20rpx 0 0;
}

.popup-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.popup-form {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.popup-input {
  flex: 1;
  padding: 10rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  font-size: 28rpx;
}

.search-btn {
  background-color: #07c160;
  color: white;
  font-size: 28rpx;
  padding: 10rpx 20rpx;
  border-radius: 8rpx;
  margin-left: 10rpx;
}

.popup-user-list {
  max-height: 400rpx;
  overflow-y: auto;
}

.user-item {
  padding: 10rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.user-item text {
  font-size: 28rpx;
  color: #333;
}
</style>
